<script setup lang="ts">
import { reactive, provide } from 'vue';
import * as echarts from 'echarts';
import Footer from '@/components/Footer/index.vue';
import CharLine from './components/CharLine.vue';
import CharBar from './components/CharBar.vue';
import CharPie from './components/CharPie.vue';

import { adminHomeChart } from '@/api/admin';

provide('echarts', echarts);

const state: any = reactive({
  chartData: {},
});
const getAdminHomeChart = async () => {
  const res = await adminHomeChart({});
  if (res) {
    state.chartData = res;
  }
};
getAdminHomeChart();
</script>

<template>
  <div class="admin-page">
    <van-nav-bar title="首页" />
    <div class="admin-banner">
      <img src="@/assets/img/admin/home/banner.png" />
      <p>轻松管理项目进度，提高审核效率</p>
    </div>
    <div class="admin-title">
      <h3>工作管理<i></i></h3>
    </div>
    <div class="admin-job">
      <router-link to="/admin/home/contract">
        <img src="@/assets/img/admin/home/icon-contract.png" />
        <h4>合约管理<span>合约进度管理</span></h4>
      </router-link>
      <router-link to="/admin/home/auditor">
        <img src="@/assets/img/admin/home/icon-auditor.png" />
        <h4>审核管理<span>任务/认证管理</span></h4>
      </router-link>
      <router-link to="/admin/home/pay">
        <img src="@/assets/img/admin/home/icon-pay.png" />
        <h4>发薪管理<span>合约薪资管理</span></h4>
      </router-link>
      <router-link to="/admin/home/user">
        <img src="@/assets/img/admin/home/icon-user.png" />
        <h4>用户管理<span>入驻用户/企业</span></h4>
      </router-link>
    </div>
    <div class="admin-title">
      <h3>合约数据(周）<i></i></h3>
      <dl>
        <dt>上周</dt>
        <dd>下周</dd>
      </dl>
    </div>
    <CharLine v-if="state.chartData.line" :data="state.chartData.line"></CharLine>
    <div class="admin-title">
      <h3>新增入驻(周）<i></i></h3>
      <dl>
        <dt>人才</dt>
        <dd>企业</dd>
      </dl>
    </div>
    <CharBar v-if="state.chartData.bar" :data="state.chartData.bar"></CharBar>
    <div class="admin-title">
      <h3>人才年龄比例<i></i></h3>
    </div>
    <CharPie v-if="state.chartData.pie" :data="state.chartData.pie"></CharPie>
  </div>
  <Footer />
</template>

<style scoped>
.van-nav-bar {
  background: #f6f6f6;
}
.admin-page {
  padding: 0 0.64rem 4rem;
  background: #f6f6f6;
  min-height: 100vh;
}
.admin-banner {
  position: relative;
}
.admin-banner img {
  width: 100%;
}
.admin-banner p {
  position: absolute;
  top: 3.1rem;
  left: 1.2rem;
  font-size: 0.69rem;
  font-weight: 300;
  color: #ffffff;
}
.admin-job {
  overflow: hidden;
}
.admin-job a {
  width: 49%;
  height: 4.45rem;
  background: #ffffff;
  border-radius: 0.53rem;
  margin-right: 2%;
  margin-bottom: 0.56rem;
  float: left;
  display: flex;
  align-items: center;
}
.admin-job a:nth-child(2n) {
  margin-right: 0;
}
.admin-job a img {
  width: 2.45rem;
  height: 2.45rem;
  margin: 0 0.56rem 0 0.72rem;
}
.admin-job a h4 {
  font-size: 0.8rem;
  line-height: 0.8rem;
  font-weight: 400;
  color: #333333;
}
.admin-job a h4 span {
  font-size: 0.64rem;
  line-height: 0.64rem;
  font-weight: 300;
  color: #333333;
  margin-top: 0.45rem;
  display: block;
}
.admin-title {
  display: flex;
  align-items: center;
  margin-bottom: 0.67rem;
  margin-top: 1.44rem;
}
.admin-title h3 {
  flex: 1;
  font-size: 0.96rem;
  line-height: 0.96rem;
  font-weight: bold;
  color: #333333;
  position: relative;
  margin-bottom: 0.4rem;
}
.admin-title h3 i {
  width: 1.87rem;
  height: 0.64rem;
  background: linear-gradient(90deg, #fe8f27, #ffffff);
  opacity: 0.46;
  border-radius: 0.32rem;
  position: absolute;
  left: -0.1rem;
  top: 0.4rem;
  opacity: 0.4;
}
.admin-title dl {
  display: flex;
  font-size: 0.59rem;
  line-height: 0.59rem;
  font-weight: 400;
  color: #666666;
}
.admin-title dl dt {
  margin-right: 0.77rem;
}
.admin-title dl dt::before {
  content: '';
  width: 0.37rem;
  height: 0.37rem;
  background: #6da6ea;
  border-radius: 50%;
  margin-right: 0.24rem;
  display: inline-block;
}
.admin-title dl dd::before {
  content: '';
  width: 0.37rem;
  height: 0.37rem;
  background: #fbc605;
  border-radius: 50%;
  margin-right: 0.24rem;
  display: inline-block;
}
</style>
